<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入内容" v-model="tosay"></textarea>
        <mt-button type='primary' size='large' @click="sbmt">发表评论</mt-button>
        <p>发表人：{{myid}}</p>
        <ul class='plContent'>
            <li v-for="item in list" :key="item.id">{{item.postId}}--{{item.name}}</li>
        </ul>
        <mt-button type='danger' size='large' @click="more">加载更多</mt-button>
 
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {

    data(){
        return{
            tosay:'',
            list:[],
            pageno:1
        }
    },
    props:['myid'],
    created(){
        this.getlist()
    },
    methods:{
        getlist:function(){
            this.$http.get('http://jsonplaceholder.typicode.com/posts/'+this.pageno+'/comments')
            .then(result=>{
                this.list=this.list.concat(result.body);
            console.log(this.list)
            })
        },
        more(){
           this.pageno++
           this.getlist()
        },
        sbmt(){
              if(this.tosay.trim().length==0){
                  return Toast('评论内容不能为空')
              }else{
                  this.$http.post('http://jsonplaceholder.typicode.com/posts/',{content:this.tosay.trim()})
                  .then(result=>{
                      //拼出一个评论对象
                      var cmt={
                          user_name:'匿名用户',
                          content:this.tosay.trim()
                      }
                      .this.list.unshift(cmt)

                  })
              }
        }

    }
}
</script>
<style scoped>
  .plContent{
      max-height: 100px;
      overflow: auto;
  }
</style>
